import { Link } from '@brillout/docpress'

Overview of how to define the URL of your pages.


## Filesystem Routing

Vike supports *Filesystem Routing*: the URL of a page is determined by its location on your filesystem.

For example:

```yaml
FILESYSTEM                     URL
====================           ======
pages/index/+Page.js           /
pages/about/+Page.js           /about
pages/jobs/+Page.js            /jobs
```

> Vike always skips the `pages/` and `index/` directories when determining the URL.

> `+` files are explained at <Link href="/config#files" doNotInferSectionTitle />.

For more details, see:
 - <Link href="/filesystem-routing" />

### Parameterized routes

```yaml
FILESYSTEM                     URL
========================       =======================
pages/movie/@id/+Page.js       /movie/1, /movie/2, ...
```

> The parameter `id` is available at <Link href="/pageContext#routeParams">`pageContext.routeParams.id`</Link>.

### Groups

You can organize your pages into groups:

```yaml
FILESYSTEM                             URL
================================       ==================
pages/(marketing)/index/+Page.js       /
pages/(marketing)/about/+Page.js       /about
pages/admin-panel/index/+Page.js       /admin-panel
pages/admin-panel/users/+Page.js       /admin-panel/users
```
> Any directory inside parentheses such as `(marketing)` is ignored by Filesystem Routing. See also: <Link href="/filesystem-routing#ignored-directories" />.

It enables you to set different configurations for different groups of pages:

```yaml
pages/(marketing)/+Layout.js # The layout for all marketing pages
pages/(marketing)/index/+Page.js
pages/(marketing)/about/+Page.js

pages/admin-panel/+Layout.js # The layout for all admin pages
pages/admin-panel/index/+Page.js
pages/admin-panel/users/+Page.js
```

> It's powered by config inheritance, see <Link href="/config#inheritance" />.

> You can define two `pages/` directories for a <Link href="/file-structure">domain-driven file structure</Link>:
> ```yaml
> # Domain: marketing
> (marketing)/pages/+Layout.js
> (marketing)/pages/index/+Page.js
> (marketing)/pages/about/+Page.js
> (marketing)/components/ContactUs.js
>
> # Domain: admin panel
> admin-panel/pages/+Layout.js
> admin-panel/pages/index/+Page.js
> admin-panel/pages/users/+Page.js
> admin-panel/components/Charts.js
> admin-panel/database/fetchUsers.js
> ```


### `src/`

You can define all files within a `src/` directory:

```yaml
FILESYSTEM                     URL
========================       ======
src/pages/index/+Page.js       /
src/pages/about/+Page.js       /about
```

> Vike always skips the `src/` directory when determining the URL. See also: <Link href="/filesystem-routing#ignored-directories" />.


## Route String

Instead of Filesystem Routing, you can define a Route String.

```ts
// /pages/product/+route.ts

// This file defines the route of /pages/product/+Page.ts

// Route String
export default '/product/@id'
```

> The parameter `id` is available at <Link href="/pageContext#routeParams">`pageContext.routeParams.id`</Link>.

For more information, see:
 - <Link href="/route-string" />


## Route Function

You can use Route Functions to get full programmatic flexibility for advanced routing logic.

```ts
// /pages/product/edit/+route.ts
// Environment: server & client

// This file defines the route of /pages/product/edit/+Page.ts

import type { PageContext } from 'vike/types'
// We use a RegExp, but we could as well use a routing library.
import partRegex from 'part-regex'
const routeRegex = partRegex`/product/${/([0-9]+)/}/edit`

// Route Function
export function route(pageContext: PageContext) {
  const match = pageContext.urlPathname.match(routeRegex)
  if (!match) return false
  const [, id] = match
  return { routeParams: { id } }
}
```

For more information, see:
- <Link href="/route-function" />

## Route Guards

You can use a `guard()` hook to protect pages from unauthorized/unexpected access.

```ts
// /pages/admin/+guard.ts
// Environment: server

import type { PageContextServer } from 'vike/types'
import { render } from 'vike/abort'

// This guard() hook protects all pages /pages/admin/**/+Page.ts

export async function guard(pageContext: PageContextServer) {
  if (!pageContext.user.isAdmin) {
    throw render(401, "You aren't allowed to access this page.")
  }
}
```

> This `guard()` hook applies to all pages living at `/pages/admin/**/*`, see <Link href="/config#inheritance" />.

For more information, see:
- <Link href="/guard" />


## TypeScript

There is work-in-progress for supporting type safe links, see [#698 Typesafe Links](https://github.com/vikejs/vike/issues/698).


## React Router / Vue Router

Although we usually don't recommend it, you can use Vike with React Router and Vue Router:
 - <Link href="/react-router" />
 - <Link href="/vue-router" />

## See also

 - <Link href="/filesystem-routing" />
 - <Link href="/route-string" />
 - <Link href="/route-function" />
 - <Link href="/routing-precedence" />
 - <Link href="/guard" />
 - <Link href="/vue-router" />
 - <Link href="/react-router" />
 - <Link href="/server-routing-vs-client-routing" />
